<template>
  <div class="page_info">
    <div class="screen_name">
        <span class="page_info_label">大屏名称</span>
        <span class="page_info_text">
            <span 
                class="page_info_text_radio el-icon-close" 
                :class="form.showTitle === 'hidden' ? 'clicked' : ''"
                @click="changeStatus('hidden')"></span>
            <span 
                class="page_info_text_radio el-icon-check" 
                :class="form.showTitle === 'show' ? 'clicked' : ''"
                @click="changeStatus('show')"></span>
        </span>
        <div class="page_info_name">
            <el-input v-model="form.screenTitle" maxlength="20" v-show="form.showTitle === 'show'" show-word-limit placeholder="请输入大屏名称"></el-input>
        </div>
    </div>
    <div class="screen_type">
        <span class="page_info_label">屏幕类型</span>
        <span class="page_info_type">
            <el-radio-group v-model="form.screenSize" @change="changeScreenType">
                <el-radio :label="'across'">横屏</el-radio>
                <el-radio :label="'vertical'">竖屏</el-radio>
            </el-radio-group>
        </span>
    </div>
    <div class="screen_skin">
        <span class="page_info_label">皮肤设置</span>
        <div class="page_info_skin">
            <span v-for="(item, index) in shin" class="page_info_skin_item" :key="index">{{ item }}</span>
        </div>
    </div>
  </div>
</template>

<script>
import { EventBus } from "@/untils/event";

export default {
    data() {
        return {
            form: {
                showTitle: 'show',
                screenTitle: '',
                screenSize: 'vertical'
            },
            shin: ['红', '橙', '黄', '绿', '青' ,'蓝', '紫']
        }
    },
    methods: {
        changeStatus(status) {
            this.form.showTitle = status
        },
        changeScreenType(){
            EventBus.$emit('change_screen_type', this.form.screenSize)
        }
    }
}
</script>

<style lang="less" scoped>
    .page_info {
        padding: 5px;
        .screen_name {
            .page_info_text {
                .page_info_text_radio {
                    float: right;
                    margin: 0px 5px 10px;
                    width: 30px;
                    height: 20px;
                    text-align: center;
                    cursor: pointer;
                    border: 1px solid #ccc;
                    border-radius: 3px;
                }
                .clicked {
                    background-color: green;
                }
            }
            .page_info_name {
                padding: 20px 0px;
                border-bottom: 1px solid #ccc;
            }
            
        }
        .screen_type {
            padding: 15px 0px;
            border-bottom: 1px solid #ccc;
            .page_info_type {
                float: right;
            }
        }
        .screen_skin {
            .page_info_label {
                display: inline-block;
                padding: 15px 0px;
            }
            .page_info_skin {
                .page_info_skin_item {
                    display: inline-block;
                    background-color: #f4f5f7;
                    margin: 5px;
                    width: 32px;
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                    cursor: pointer;
                }
            }
        }
    }
    
    
</style>>
